<template>
    <div class="blog-list-container">
      <el-card class="blog-list-card" shadow="hover">
        <div class="blog-list-header">
          <div style="text-align: left;">
            <router-link to="/home"><el-i class="fas fa-home" style="color: black;"></el-i></router-link> 
          </div>
          <h2 class="blog-list-title">我的博客列表</h2>
          <p class="blog-list-description">记录生活点滴，分享所思所想</p>
        </div>
        <el-timeline>
          <el-timeline-item v-for="(post, index) in bokes" :key="index" :timestamp="post.date" placement="top">
            <el-card shadow="never">
              <h3 class="blog-item-title">{{ post.PostTitle }}</h3>
              <p class="blog-item-description">{{ post.PostContent }}</p>
              <el-button type="text" @click="goToBokeInfo(post)">阅读更多</el-button>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </template>

<script>
   
    import instance from '../api/server';
    export default {
        name: "MyBoke",
        data() {
            return {
                bokes: []
            }
        },
        created() {
            const _this = this;
            instance.get('/myinfo/blog/getuserpost').then(response => {
                _this.bokes = response.data.data
            })
        },
        methods: {
        goToBokeInfo(post) {
            const postID = post.PostID;
            this.$router.push(`/bokeinfo/${postID}`); // 使用this.$router来访问路由实例
        }
    }
}

</script>

<style scoped>

</style>